<template>
  <div class="cssTransition" >
    <div class="pic_con">
      <img  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F68%2Fc8%2F7d%2F68c87deaf34b1b521135181ebfb12633.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648369991&t=de4ae4393818c6d72cce751a6cc815c2" alt="">
      <div class="pic_info">
        <h3>文字说明标题</h3>
			  <p>文字说明文字说明文字说明文字说明</p>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';

@Options({ components: {} })
export default class CssTransition extends Vue {
  public mounted() {

  }
}
</script>

<style lang="postcss" scoped>
.cssTransition{
  .pic_con{
    width:200px;
    height:300px;
    margin:50px auto;
    position:relative;
    overflow:hidden;
    img{
      width: 100%;
      height: 300px;
    }
    .pic_info{
      position:absolute;
      left:0;
      top:300px;
      width:180px;
      height:100px;
      background-color:red;
      color:#fff;
      padding:10px;
      transition:top 500ms ease,width 200ms ease-in;
    }
  }
  &:hover .pic_info{
      top:180px;
      width: 100px;
      height: 100px;
      background-color: pink;
  }
}
</style>
